<template>
  <div class="fc-org-select">
    <div class="tags">
      <el-button
        v-if="buttonType === 'button'"
        size="small"
        type="primary"
        icon="el-icon-plus"
        @click="show = true"
        style="margin-bottom: 6px;">
          添加{{title}}
      </el-button>
      <div class="input-box" :class="{'as-input': buttonType === 'input'}"  @click="show = true">
          <el-tag
            v-bind="tagConfig"
            class="org-tag"
            v-for="item in selectedData"
            :key="item.key"
            @close="removeCheckedItem(item)">
            {{item.label}}
          </el-tag>
      </div>

    </div>

    <fc-org-transfer
        ref="transfer"
        :value="innerValue"
        :title="title"
        :searchable="searchable"
        :maxNum="maxNum"
        :type="type"
        :show.sync="show"
        @confirm="onConfirm" />

  </div>
</template>
<script>

export default {
  /**
   * v-model
   */
  model:{
    prop: 'value',
    event: 'input'
  },
  /**
   * 组件名称
   */
  name:'fc-org-select',

  /**
   * 父组件传值
   */
  props:{
    value:{
      type: Object | null,
      required: true
    },

    /**
     * 默认选择的标签页类型为部门
     */
    type: {
      type: String,
      default: ()=>('dep')
    },

    /**
     * 标题
     */
    title: {
      type: String,
      default: '组织机构'
    },

    /**
     * 呈现形式
     */
    buttonType: {
      type: String,
      default: 'input'
    }, // or input

    /**
     * 是否允许查询
     */
    searchable: {
      type: Boolean,
      default: true
    },

    /**
     * 允许最大选择数量
     */
    maxNum: {
      type: Number,
      default: 99
    },

    /**
     * 标签
     */
    tagConfig:{
      type: Object,
      default: () => ({
        type: 'info',
        closable: true,
        'disable-transitions': false,
        hit: false,
        color: undefined,
        size: 'small',
        effect: 'light'
      })
    },
  },
  data(){
    return {

      /**
       * 是否显示
       */
      show: false,

      /**
       * 内部已选择的
       */
      innerValue: null,

      /**
       * 查询的数据
       */
      selectedData: [],
    }
  },
  watch:{

     /**
      * 监听v-model变化事件
      */
    value: {
      handler:function (val) {

        if(!val) return

        this.reloadCmpData()
      },
      immediate: true,
      deep: true
    },

    /**
     * 选择标签页类型
     */
    type: {
      handler:function (val) {
      },
      immediate: true,
    }
  },
  computed:{
    selectedLabels(){

      var result = [];

      for(var i = 0; i < this.selectedData.length; i++){
          result.push(this.selectedData[i].label);
      }

      return result.join(",");
    }
  },
  methods:{
    reloadCmpData(){

      /**
       * 初始化内部值
       * @type {{}}
       */
      this.innerValue = JSON.parse(JSON.stringify(this.value))

      // 将回调延迟到下次 DOM 更新循环之后执行
      // transfer 可能还未加载成功
      this.$nextTick(_ => {
        this.initSelectedData()
      })
    },

    /**
     * 初始化已选择标签
     */
    initSelectedData(){

      var that = this;

      var arr = [];
      for(var i = 0; i < that.innerValue.length; i++){
          arr.push({
              key: that.getKey(that.innerValue[i], that.type),
              label: that.getLabel(that.innerValue[i], that.type)
          })
      }

      this.selectedData = arr;

    },

    /**
     * 获取属性值
     */
    getPropByKey(data, type, key){

      //获取穿梭框子组件实例
      //　　1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素
      //   2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。
      const transfer = this.$refs['transfer']

      if(transfer){

        return transfer.getNodeProp(data, key, type)

      }else{

        return ''
      }
    },

    getKey(data, type){
      return this.getPropByKey(data, type, 'nodeId')
    },

    getLabel(data, type){
      return this.getPropByKey(data, type, 'label')
    },

    /**
     *移除已选择某一项
     */
    removeCheckedItem (item) {

        var that = this;

      //删除已选择的
      const index = this.innerValue.findIndex(t => this.getKey(t, that.type) === item.key)

      index > -1 && this.innerValue.splice(index, 1)

      //初始化标签选择
      this.initSelectedData()

      //设置父 v-model绑定值为已选中的值
      this.$emit('input', this.innerValue)
    },

    onConfirm (data) {

      //设置选中的值
      this.innerValue = data

      //初始化标签选择
      this.initSelectedData()

      //设置父 v-model绑定值为已选中的值
      this.$emit('input', this.innerValue)
    }
  }
}
</script>
<style lang="stylus" scoped>
.tags {
  .input-box.as-input{
    border: 1px solid #DCDFE6;
    padding-left: 6px;
    font-size: 12px;
    min-height: 32px;
    line-height: 30px;
    border-radius: 4px;
    background: white;
    color #606266
    cursor pointer
  }
  .org-tag{
    margin-right: 6px;
    max-width: 6rem;
    overflow hidden
    text-overflow ellipsis
    position relative
    padding-right 1rem
    vertical-align middle

    >>> .el-tag__close{
      position: absolute;
      right: 2px;
      top: 50%;
      margin-top: -7px;
    }
  }
}
</style>
